<template>
  <div id="UpdateCustomInformation">
    <el-row>
      <div class="title">修改信息</div>
      <el-form label-position="left" label-width="auto" id="form">
        <el-row class="adjustment-row" type="flex" align="middle">
          <el-col :span="8">
            <el-form-item label="用户名">
              <el-input v-model="form.username"></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="8" :offset="2">
          </el-col>
        </el-row>
        <el-row class="adjustment-row">
          <el-col :span="8">
            <el-form-item label="密码">
              <el-input type="password" v-model="form.password"></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="8" :offset="2">
            <el-form-item label="确认新密码">
              <el-input type="password" v-model="form.password_suer"></el-input>
            </el-form-item>
          </el-col>
        </el-row>
        <el-row class="adjustment-row">
          <el-form-item label="收货地址">
            <el-row class="address-box">
              <el-col :span="8" v-for="(item, index) in userInfo" :key="index">
                <AddressCard :data="item" :get-alluser-info="getAlluserInfo"></AddressCard>
              </el-col>
              <el-col :span="8">
                <div class="add-box" v-on:click="dialogFormVisibleAdd = true">
                  <i class="el-icon-circle-plus-outline icon-size"></i>
                </div>
              </el-col>
            </el-row>
          </el-form-item>
        </el-row>
      </el-form>
      <el-row>
        <el-col :push="9" :span="2">
          <el-button v-on:click="updateUser">提交修改</el-button>
        </el-col>
      </el-row>
    </el-row>
    <!--    dialog-->
    <el-dialog title="添加收货地址" :visible.sync="dialogFormVisibleAdd">
      <el-row>
        <el-col :span="24">
          <el-form :model="form">
            <el-row>
              <el-col :span="24">
                <el-form-item label="手机号">
                  <el-input placeholder="请输入手机号" maxlength="11"  show-word-limit v-model="form.addressPhone" autocomplete="off"></el-input>
                </el-form-item>
              </el-col>
            </el-row>
            <el-form-item label="收货地址">
              <el-input placeholder="请输入地址" v-model="form.addressTransactionAddress"></el-input>
            </el-form-item>
          </el-form>
          <el-row class="adjustment-bottom-button" type="flex" justify="end">
            <el-col :span="6">
              <el-button v-on:click="insertUser_info">保存修改</el-button>
            </el-col>
          </el-row>
        </el-col>
      </el-row>
    </el-dialog>
  </div>
</template>

<script>
import AddressCard from "../components/AddressCard";
export default {
  name: "UpdateCustomInformation",
  components: {AddressCard},
  data() {
    return {
      form: {
        id: null,     //ID
        phone: null,  //手机号
        status: null,   //？？？
        transactionAddress: null, //地址
        userId: null,  //用户ID,
        password: null,
        password_suer: null,
        username: null,
        addressPhone: null,
        addressTransactionAddress: null

      },
      userInfo: null,
      dialogFormVisibleAdd: false,  //控制增加对话框是否可见
    }
  },
  methods: {
    insertUser_info: function () {
      var phone=this.form.addressPhone
      let tra=this.form.addressTransactionAddress;
      let flag=0;
      for (let i = 0; i <phone.length ; i++) {
        if( phone.charAt(i)<'0' || phone.charAt(i)>'9'){
          flag=1;break;
        }
      }
      if(flag===0 && tra!=null) {
        this.$api.user.insertUser_info({
          phone: this.form.addressPhone,
          transactionAddress: this.form.addressTransactionAddress,
          status: 0,
          userId: sessionStorage.getItem("userId")
        }).then(res => {
          if (res.data.code === 200) {
            this.$message({
              message: "添加成功",
              type: "success"
            });
            this.dialogFormVisibleAdd = false;
            this.getAlluserInfo();
          }
        })
      }
      else if(flag===1) {
        this.$alert('手机号格式错误', '错误', {
          confirmButtonText: '确定',
          callback: action => {
            this.$message({
              type: 'info',
              message: `action: ${ action }`
            });
          }
        })
      }
      else if(tra===null){
        this.$alert('地址不能为空', '错误', {
          confirmButtonText: '确定',
          callback: action => {
            this.$message({
              type: 'info',
              message: `action: ${ action }`
            });
          }
        })
      }
    },
    getAlluserInfo: function () {
      this.$api.user.getAlluserInfo({
        userId: sessionStorage.getItem("userId")
      }).then(res => {
        console.log("getAlluserInfo", res);
        this.userInfo = res.data.data;
        this.formDataInit();
      })
    },
    updateUser: function () {
      this.$api.user.updateUser2({
        password: this.form.password,
        password_suer: this.form.password_suer,
        username: this.form.username,
        userId: sessionStorage.getItem("userId"),
        phone:sessionStorage.getItem("phone"),
        transactionAddress:sessionStorage.getItem("transactionAddress")
      }).then(res => {
        if(res.data.code === 200){
          this.$message({
            type: "success",
            message: "修改成功"
          })
        }
        else if(res.data.data.password!=null){
          this.$alert('密码格式错误', '错误', {
            confirmButtonText: '确定',
            callback: action => {
              this.$message({
                type: 'info',
                message: `action: ${ action }`
              });
            }
          });
        }
        else if(res.data.data.password_sure!=null){
          this.$alert('两次密码输入不一致', '错误', {
            confirmButtonText: '确定',
            callback: action => {
              this.$message({
                type: 'info',
                message: `action: ${ action }`
              });
            }
          });
        }
        else if(res.data.data.username!=null){
          this.$alert('此用户名已存在', '错误', {
            confirmButtonText: '确定',
            callback: action => {
              this.$message({
                type: 'info',
                message: `action: ${ action }`
              });
            }
          });
        }
        console.log("updateUser", res.data.data);
      })
    },
    formDataInit: function () {
      this.form.username = sessionStorage.getItem("username");
      this.form.phone = this.userInfo[0].phone;
    }
  },
  created() {
    this.getAlluserInfo();
  }
}
</script>

<style lang="scss"  scoped>
#UpdateCustomInformation {

}
#form {

}
.title {
  font-size: 36px;
  font-weight: bold;
  color: #363636;
  padding-bottom: 30px;
}
.adjustment-row {
  padding-top: 20px;
}
>>> .el-form-item__label {
  font-size: 24px;
  line-height: 60px;
}
.address-box {
  height: 350px;
  width: 900px;
  overflow: auto;
  border-radius: 20px;
  border: 2px dashed rgba(176, 224, 230, 1);
  padding: 20px;
}
.add-box {
  width: 245px;
  height: 150px;
  /*border: 2px dashed rgba(176, 224, 230, 1);*/
  background: rgba(176, 224, 230, 0.2);
  box-shadow: 0 5px 20px 0 rgba(100,100,100,0.2);
  border-radius: 15px;
  padding: 0 15px 15px 15px;
  position: relative;
  cursor: pointer;
}
.add-box:hover {
  /*border: 2px dashed #9B1A1A;*/
  background: rgba(176, 224, 230, 0.4);
}
.icon-size {
  font-size: 60px;
  color: #7D7D7D;
  position: relative;
  top: 50%;
  left: 50%;
  transform: translateY(-50%) translateX(-50%);
}
.icon-size {
  font-size: 60px;
  color: #7D7D7D;
  position: relative;
  top: 50%;
  left: 50%;
  transform: translateY(-50%) translateX(-50%);
}
>>> .el-button {
  background: rgba(176, 224, 230, 1);
  padding: 10px 20px 10px 20px;
  color: white;
  font-size: 24px;
  font-weight: 500;
}
>>> .el-dropdown-menu__item:hover {
  color: #B0E0E6;
}
>>> .el-dialog {
  width: 600px;
  border-radius: 25px;
}
>>> .el-dialog__title {
  line-height: 30px;
  font-size: 30px;
  color: rgba(28, 28, 28, 0.6);
  font-weight: bold;
}
>>> .el-dialog__body {
  padding: 10px 40px;
}
>>> .el-dialog__header {
  padding: 20px 40px;
  background: rgba(176, 224, 230, 0.8);
  border-radius: 25px 25px 0 0;
}
>>> .el-dialog__close {
  font-size: 30px;
  color: rgba(28, 28, 28, 0.6);
}
</style>
